<template>
  <div class="pageBox">
    <head-component title="兑换记录"></head-component>
    <div class="content">
      <div class="list">
          <div class="listItem">
          <div class="top">申请兑换</div>
          <div class="bom flex-between">
            <p>2022-03-25 23:34:45</p>
            <span>-100.00</span>
          </div>
          <div class="status status2 flex-center">审核中</div>
        </div>
          <div class="listItem">
          <div class="top">申请兑换</div>
          <div class="bom flex-between">
            <p>2022-03-25 23:34:45</p>
            <span>-100.00</span>
          </div>
          <div class="status status2 flex-center">审核通过</div>
        </div>
        <div class="listItem">
          <div class="top">申请兑换</div>
          <div class="bom flex-between">
            <p>2022-03-25 23:34:45</p>
            <span>-100.00</span>
          </div>
          <div class="status flex-center">审核拒绝</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script type="text/ecmascript-6">
import { defineComponent } from "vue";
import headComponent from "../../components/headComponent.vue";

export default defineComponent({
  components: {
    headComponent,
  },
  setup() {
    return {};
  },
});
</script>

<style scoped lang="less">
.pageBox {
  width: 100%;
  min-height: 100vh;
  background-color: #f5f5f5;
  padding-top: 88px;
  .content {
    padding: 20px 30px;
    .list {
      .listItem {
        width: 100%;
        height: 188px;
        background: #ffffff;
        box-shadow: 0px 4px 12px 0px rgba(223, 207, 207, 0.5);
        border-radius: 20px;
        margin-bottom: 20px;
        padding: 40px 30px;
        position: relative;
        .top {
          font-size: 32px;
          font-weight: 500;
          color: #333333;
        }
        .bom {
          margin-top: 30px;
          p {
            font-size: 24px;
            font-weight: 400;
            color: #999999;
          }
          span {
            font-size: 26px;
            font-weight: 400;
            color: #e00b12;
          }
        }
        .status {
          width: 120px;
          height: 54px;
          background: linear-gradient(270deg, #b30b11 0%, #f50811 100%);
          border-radius: 0px 20px 0px 20px;
          position: absolute;
          right: 0;
          top: 0;
          font-size: 22px;
          font-weight: 400;
          color: #f5f5f5;
        }
        .status2 {
          
background: linear-gradient(138deg, #8655DC 0%, #C571D9 100%);
        }
      }

      .listItem:nth-last-of-type(1) {
        margin-bottom: 0;
      }
    }
  }
}
</style>